.conversation-caterpillar {
	display: flex;
}

.conversation-caterpillar__count {
	align-items: center;
	cursor: pointer;
	color: var( --color-primary );
	display: flex;
	margin-left: 8px;
	flex: 1 1 auto;
	font-size: $font-body-small;
	font-weight: 400;
	overflow: hidden;
	position: relative;
	white-space: nowrap;

	&:hover {
		color: var( --color-primary-light );
	}

	&::after {
		@include long-content-fade( $size: 35px );
		height: 16px * 2;
		width: 16px * 2;
		z-index: 1;
	}

	@include breakpoint-deprecated( '<660px' ) {
		padding: 0;
		text-align: left;
	}
}
